<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <input ref="str" v-if="isEdit" type="text" v-model="str"/>
    <span v-else>{{str}}</span>

    <button @click="fn">{{isEdit?"完成":"修改"}}</button>
</div>
</body>
<script>
	new Vue({
		el: "#root",
        data:{
			isEdit:false,
			str:"我现在正在御码学习！"
        },
        methods:{
			fn(){
				this.isEdit = !this.isEdit;
				if(this.isEdit){
					this.$nextTick(function(){
						this.$refs.str.focus();
                    })
                }

            }
        }
	})
</script>
</html>